Skip to content

Move tag next/prev buttons to the left#4751

Open
Simpler1 wants to merge 1 commit into
ZoneMinder:masterfrom
Simpler1:patch-6
Open

Move tag next/prev buttons to the left#4751
Simpler1 wants to merge 1 commit into
ZoneMinder:masterfrom
Simpler1:patch-6

Conversation

@Simpler1
Copy link
Copy Markdown
Contributor

Move the tag next/prev buttons to the left so that you don't have to move your mouse cursor all the way across the screen when clicking between the dropdown and these two buttons. This is especially noticeable on wide screen monitors.

Move the tag next/prev buttons to the left so that you don't have to move your mouse cursor all the way across the screen when clicking between the dropdown and these two buttons.  This is especially noticeable on wide screen monitors.
@connortechnology
Copy link
Copy Markdown
Member

@IgorA100 what do you think? I get the idea RE less mouse travel... but it feels wrong from a UI perspective to put them on the left.

@connortechnology connortechnology requested a review from Copilot May 1, 2026 22:17
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Reorders the tag navigation controls in the event view so the Prev/Next tag buttons appear to the left of the tag dropdown, reducing mouse travel on wide screens.

Changes:

  • Moved the tag dropdown markup to appear after the Prev/Next buttons within the tags container.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 286 to +293
<button type="button" id="tagNextBtn" title="<?php echo translate('Apply the last tag, then play the next event') ?>" class="inactive" data-on-click-true="tagAndNext">
<i class="material-icons md-18">label</i>
</button>
<div class="tag-dropdown">
<!-- input type has to be "search" (not "text") so that the Enter button (not Next) works on mobile Chrome browser. -->
<input type="search" id="tagInput" class="tag-input" placeholder="Add tag" data-role="tagsinput">
<div class="tag-dropdown-content"></div>
</div>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 2, 2026

but it feels wrong from a UI perspective to put them on the left.

Yes, I agree.
Most often, selecting and adding tags is probably done with the keyboard. Therefore, for convenience, I would make keyboard control possible without switching to the mouse.
For example, we enter a new tag or select an existing one, then press "Enter" and then "Ctrl" + "Right" or "Ctrl" + "Left" to move to the next or previous event.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 2, 2026

@Simpler1
Try this PR #4783
You might like it and won't have to move the control buttons anywhere.

@Simpler1
Copy link
Copy Markdown
Contributor Author

Simpler1 commented May 4, 2026

@IgorA100 You're solving a problem that doesn't exist. The keyboard controls have been there since tags were originally implemented. This fix is specifically to reduce mouse movement when using the mouse to add tags. You obviously don't use the tags functionality. I tag over 1000 events daily and routinely switch between using the mouse and keyboard. The mouse is definitely easier to use when adding tags. Let's concentrate on simplifying the mouse movement when adding tags.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

You're solving a problem that doesn't exist.

You probably don't use the keyboard to assign tags, but only the mouse.

After my PR, you can put the mouse aside and use only the keyboard. Although no, you'll still need to make one mouse click – click "#tagInput."
I'm not saying my PR will eliminate all problems for all users. But it does make it much easier to enter new tags and search for existing ones WITHOUT having to hover the mouse over and click the buttons to navigate to the events you want to move to the left.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

The keyboard controls have been there since tags were originally implemented.

You probably haven't read the description of my PR and haven't tried using it.

@Simpler1
Copy link
Copy Markdown
Contributor Author

Simpler1 commented May 4, 2026

SMH... This issue is around mouse movement. Not keyboard usage. The keyboard already works and is well documented.

https://zoneminder.readthedocs.io/en/latest/userguide/tags.html#adding-existing-tags-to-an-event

Reduce mouse movement.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

The keyboard already works and is well documented.

This further confirms that you didn't read my PR description or try it.
Unfortunately, in this case, when I'm not being heard, I'm powerless.
If you read the description, tried the key combinations and something specific didn't suit you, then I could help you. But since you didn't read it or try it, I'm powerless.

@Simpler1
Copy link
Copy Markdown
Contributor Author

Simpler1 commented May 4, 2026

You're powerless because you are not trying to reduce mouse movement. No keyboard involved.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

@Simpler1
Just for you:

  • Click the tag entry block.
  • Start typing the tag name.
    If you're adding a single, new tag, after typing the tag, press "Ctrl" + "Left" (the entered tag will be added to the event and the transition will be to the previous event) or "Ctrl" + "Right" (the entered tag will be added to the event and the transition will be to the next event).
    If you're adding multiple tags, type the tag name. If the tag is new, press "Enter." The tag will be added (yes, this feature was there before), then the cursor will be positioned for entering/adding a new tag (this wasn't there before). Enter the next tag, and so on. After entering the last tag, you don't need to press "Enter"; simply press "Ctrl" + "Left" or "Ctrl" + "Right" (this wasn't possible before).

This way, you practically don't need a mouse at all, and the speed of entering tags increases significantly!!!

@connortechnology
Isaac, I think this behavior should be added to the documentation.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

No keyboard involved.

Perhaps you're being disingenuous...
How can you enter 1,000 tags without using the keyboard??? I can't imagine scrolling through a drop-down list of 1,000 tags, finding the one you need, and selecting it with the mouse.
Honestly, I can't imagine how you can do this WITHOUT using the keyboard...

@Simpler1
Copy link
Copy Markdown
Contributor Author

Simpler1 commented May 4, 2026

I add the same tags over an over. You don't even understand the issue. Please stop trying to change the subject. Do you understand what the "next/prev" tag buttons actually even do???

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

Minor improvement: #4796

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 4, 2026

Do you understand what the "next/prev" tag buttons actually even do???

Probably not.
Explain it to me.
Just don't tell me to read the documentation. I've read it.

@connortechnology
Copy link
Copy Markdown
Member

I agree with copilot above. This should be done in CSS. I may merge, but apply copilots fix.

@IgorA100
Copy link
Copy Markdown
Contributor

IgorA100 commented May 6, 2026

Do you understand what the "next/prev" tag buttons actually even do???

I'll let you in on a big secret. The "Ctrl" + "Right" and "Ctrl" + "Left" key combinations are the exact equivalent of the "next/prev" tag buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants